<template>
    <div class="app-container">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="用户名称" prop="userName">
                <el-input
                        v-model="queryParams.userName"
                        placeholder="请输入用户名称"
                        clearable
                        size="small"
                        style="width:200px"
                />
            </el-form-item>
            <el-form-item label="用户账号" prop="loginAccount">
                <el-input
                        v-model="queryParams.loginAccount"
                        placeholder="请输入用户账号"
                        clearable
                        size="small"
                        style="width:200px"
                />
            </el-form-item>
            <el-form-item label="IP地址" prop="ipAddr">
                <el-input
                        v-model="queryParams.ipAddr"
                        placeholder="请输入IP地址"
                        clearable
                        size="small"
                        style="width:200px"
                />
            </el-form-item>
            <el-form-item label="登陆状态" prop="loginStatus">
                <el-select
                        v-model="queryParams.loginStatus"
                        placeholder="请选择登陆状态"
                        clearable
                        size="small"
                        style="width:200px"
                >
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="登陆类型" prop="loginType">
                <el-select
                        v-model="queryParams.loginType"
                        placeholder="请选择登陆类型"
                        clearable
                        size="small"
                        style="width:200px"
                >
                    <el-option
                            v-for="dict in loginTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="dateRange"
                        size="small"
                        style="width:240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholde="开始日期"
                        end-placeholde="结束日期"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="initLoginInfo">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 表头按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="delLists">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-thumb" size="mini">清空</el-button>
            </el-col>
        </el-row>
        <!-- 表头按钮结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="loginInfoTableList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="日志ID" align="center" prop="infoId" />
            <el-table-column label="用户姓名" align="center" prop="userName" />
            <el-table-column label="登陆帐号" align="center" prop="loginAccount" />
            <el-table-column label="IP" width="180" align="center" prop="ipAddr" />
            <el-table-column label="登陆地址" align="center" prop="loginLocation" />
            <el-table-column label="浏览器" align="center" prop="browser" />
            <el-table-column label="操作系统" align="center" prop="os" />
            <el-table-column label="登陆状态" prop="loginStatus" align="center" :formatter="statusFormatter" />
            <el-table-column label="用户类型" prop="loginType" align="center"  :formatter="loginTypeFormatter"/>
            <el-table-column label="登陆时间" align="center" prop="loginTime" width="200" />
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-delete" size="mini" @click="delPro(scope.row.infoId)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!-- 分页控件开始 -->
        <el-pagination
                v-show="total>0"
                :current-page="currentPage"
                :page-sizes="[5,10,20,30]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
    </div>
</template>

<script>
    export default {
        name: "loginLog",
        // 声明数据
        data() {
            return {
                // 遮罩层
                loading: false,
                // 选中多条
                multiple: true,
                // 选中数组
                ids: [],
                // 总条数
                total: 0,
                // 用户数据数据
                loginInfoTableList: [],
                // 登陆状态数据字典
                statusOptions: [],
                // 登陆类型数据字典
                loginTypeOptions: [],
                // 时间
                dateRange: [],
                currentPage: 1,
                pageSize: 10,
                // 查询参数
                queryParams: {
                    title: undefined,
                    operName: undefined,
                    status: undefined,
                    businessType: undefined
                }
            }
        },
        created() {
            this.initLoginInfo();
            this.initStatus();
            this.initType();
        },
        methods:{
            //查询所有部门
            initLoginInfo(){
                this.$axios.post("/system/api/loginLog/searchLoginLog/"+this.currentPage+"/"+this.pageSize,this.queryParams,this.dateRange).then(result=>{
                    this.loginInfoTableList=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            // 删除操作
            delPro(obj){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(`/system/api/loginLog/delById/${obj}`).then(result=>{
                        if (result.data.data){
                            this.initLoginInfo();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message.error({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 批量删除
            delLists(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("/system/api/loginLog/delListById",this.multipleSelection).then(result=>{
                        if (result.data.data){
                            this.initLoginInfo();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //状态解析
            loginTypeFormatter(row) {
                let v = row.loginType;
                return this.formatDict(this.loginTypeOptions, v);
            },

            //初始化状态
            initType() {
                this.$axios.get("/system/api/dict/data/findByType/sys_user_type").then(result => {
                    this.loginTypeOptions = result.data.data;
                })
            },
            //状态解析
            statusFormatter(row) {
                let v = row.loginStatus;
                return this.formatDict(this.statusOptions, v);
            },

            //初始化状态
            initStatus() {
                this.$axios.get("/system/api/dict/data/findByType/sys_common_status").then(result => {
                    this.statusOptions = result.data.data;
                })
            },
            // 数据表格的多选择框选择时触发
            handleSelectionChange(selection) {
                this.multipleSelection=selection;
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.pageSize = val
                // 重新查询
                this.initLoginInfo();
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.currentPage = val
                // 重新查询
                this.initLoginInfo();
            },
        }
    }
</script>

<style scoped>

</style>
